<!DOCTYPE html>
<html>
  <head >
  <meta charset="utf-8">
    <script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="./china.js" charset="utf-8"></script>
  </head>

 <body>
     <div id= "main" style="width:1350px;height:600px;"></div>

     <div id = "contextMenu" style = "position: fixed;top:20px;left: 20px;z-index: 2000;cursor: pointer">返回上一级</div>

     <script type="text/javascript">

    var myChart = echarts.init(document.getElementById('main'));

    //存储切换的每一级地图信息
    var mapStack = [];
    var curMap = {};
    var cityMap={};
    var mapCode=''

    var city = {
        杭州市: '330100',
        宁波市: '330200',
        温州市: '330300',
        嘉兴市: '330400',
        湖州市: '330500',
        绍兴市: '330600',
        金华市: '330700',
        衢州市: '330800',
        舟山市: '330900',
        台州市: '331000',
        丽水市: '331100',
    }
    var num = 33
    var name = '杭州'
    //初始化地图
    loadMap(num, name);
    /**
       绑定用户切换地图区域事件
       cityMap对象存储着地图区域名称和区域的信息(name-code)
       当mapCode有值说明可以切换到下级地图
       此时保存上级地图的编号和名称
    */
    myChart.on('mapselectchanged', function(params) {   
        console.log(params)
        var name = params.batch[0].name;
          cityMap.features.map((item)=>{
             if(item.properties.name==name){
                 if(item.properties.id.length>2){
                      mapCode=item.properties.id+'00'
                 }else{
                      mapCode=item.properties.id
                 }
                
             }
              
          })    
        if (!mapCode) {
            alert('缺失地图数据');
            return;
        }
        loadMap(mapCode, name); 
        //将上一级地图信息压入mapStack
        mapStack.push({
            mapCode: curMap.mapCode,
            mapName: curMap.mapName
        }); 
    });
    /**
       绑定右键事件
    */
    /**
       响应图表的右键事件，返回上一级地图
    */
    $('#contextMenu').on('click', function () {
        //获取上一级地图信息
        var map = mapStack.pop();
        if (!mapStack.length && !map) {
            alert('已经到达最上一级地图了');
            return;
        }
        loadMap(map.mapCode, map.mapName);  
    });
    /**
       加载地图：根据地图所在省市的行政编号，
       获取对应的json地图数据，然后向echarts注册该区域的地图
       最后加载地图信息
       @params {String} mapCode:地图行政编号,for example['中国':'1', '湖南': '430000']
       @params {String} mapName: 地图名称
    */
    function loadMap(mapCode, mapName) {
        $.getJSON('echarts/city/' + mapCode + '.json', function (data) {
             if (data) {           
                 cityMap=data;                
                 echarts.registerMap(mapName, data);
                 var option = {
                    tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/>{c} (p / km2)'
                    },
                    series: [
                        {
                            name: '',
                            type: 'map',
                            mapType: mapName,
                            selectedMode : 'multiple',
                            label: {
                                normal: {
                                    show: true
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data:[]
                        }
                    ]
                 };
                 myChart.setOption(option);
                 //存储当前地图的信息
                 curMap = {
                    mapCode: mapCode,
                    mapName: mapName
                 };     
             } else {
                 alert('无法加载该地图');
             }       
        });
    }
    </script>

  </body>
</html>

